<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 写css都是在style节点里面   css写了多个属性， 内联>外部>#>class>元素选择器。-->
    <style type="text/css">
        .class1 {
            background-color: yellow;
        }

        .class2 {
            font-size: 50px;
        }
    </style>
</head>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    //声明JQuery的初始化入口,常见的方式以$开始，里面传入一个匿名函数即可，所有的初始化写在匿名函数体里面
    $(function () {
        //演示了第一个事件绑定的功能,通过bind函数,第一个参数是要绑定的事件,第二个参数是绑定这个事件后要执行的代码,默认是匿名函数
        $("#buttonId1").bind("click", function () {
            alert("点击了第一个按钮");
        })

        //演示了简化版本的事件绑定的写法,直接是JQuery对象后面跟方法名作为函数名,然后传递一个匿名函数
        $("#buttonId2").click(function () {
            alert("我是简化版本的点击");
        })

        //演示了全选和全不选的功能,先绑定chick事件,然后调用JQuery对象的遍历
        $("#checkAll").click(function() {
            // 先拿出当前全选按钮的选中状态的值
            var flag=this.checked;
            //然后通过表单选择器和属性选择器选中所有的爱好(like),然后通过each遍历所有的checkbox,并且赋值为checkAll的值
            $(":checkbox[name='like']").each(function () {
                this.checked = flag;
            })
        })

    })
</script>
<body>
<div id="divId" style="background-color: red;">this is div
    id=divID
</div>
<div id="divId1" class="class1" style="display: none">this is div id=divID1</div>
<div id="divId2" class="class1">this is div id=divID2</div>
<div id="divId3" class="class1">this is div id=divID3</div>
<div id="divId4" class="class1 class2 " style="background-color: aqua">
    this is div id=divID1
</div>
<div>
    <a href="www.baidu.com">百度</a> <a href="www.163.com">163.com</a>
</div>
<form action="" method="post">
    <input type="hidden" name="id" value="44">
    <input type="hidden" name="id1" value="88">
    姓名<input type="text" name="userName"> <br> 密码<input
        type="password" name="password"> <br> 爱好: 篮球<input
        type="checkbox" value="篮球" name="like"> 足球<input
        type="checkbox" value="足球" name="like">
    乒乓球<input
        type="checkbox" value="乒乓球" name="like">
    <br>
    全选<input type="checkbox" id="checkAll" value="checkAll">
    <input
        type="submit" value="提交">
</form>
<button id="buttonId1">按钮1</button>
<button id="buttonId2">简化事件绑定的按钮</button>
</body>
</html>